<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
<link rel="stylesheet" type="text/css"
href="../EXT4/resources/css/ext-all.css" />
<link rel="stylesheet" type="text/css"
href="../css/style.css" />
<script type="text/javascript" src="../EXT4/ext-all.js"></script>
<script type="text/javascript" src="../script/ext-lang-zh_CN.js"></script>
<script type="text/javascript">

Ext.onReady(function() {
    Ext.QuickTips.init();
    
    var contracts = new Array();
    

    var required = '<span style="color:red;font-weight:bold" data-qtip="Required">*</span>';
    
    Ext.define('Contract', { 
        extend: 'Ext.data.Model', 
        fields: ['id','oaStudents','contractId','number',
        'payables','disbursements','method',{
        	name:'payTime',
        	convert: function(v, record) {
        		return v.substring(0,10);
        	}
        }] 
    });
                        
	var contract_store = Ext.create('Ext.data.Store', {
		model: 'Contract', 
		autoLoad: true,
		proxy: { 
            type: 'ajax', 
            url: '../service/contract_all',
            method: 'POST',
            reader: { 
                type: 'json', 
                root: 'root'
            }
    	}
	});
    
    var multiCombo = Ext.create('Ext.form.field.ComboBox', {
	    multiSelect: true,
	    displayField: 'number',
	    store: contract_store,
	    afterLabelTextTpl: required,
		allowBlank: false,
		forceSelection: true,
	    fieldLabel:'合同(Contract)',
	    anchor: '95%',
	    listeners: {
	    	select: function(comb, records) {
	    		contracts.length = 0;
	    		
	    		Ext.each(records, function(record) {
	    			contracts.push(record.data.id);
	    		});
	    		
	    	}
	    }
	    
	});
	
	var contact_type_store = Ext.create('Ext.data.Store', {
	    fields : ['name', 'value'],
	    data   : [
	        {name : 'QQ',   value: '1'},
	        {name : 'MSN',  value: '2'},
	        {name : 'e-mail', value: '3'}
	    ]
	})
    
    var top = Ext.create('Ext.form.Panel',{
        id:'main_form',
        width: '100%',
        frame: true,
        fieldDefaults: {
            labelAlign: 'top',
            msgTarget: 'side'
        },

        items: [{
            xtype: 'container',
            anchor: '100%',
            layout: 'hbox',
            items:[{
                xtype: 'container',
                flex: 1,
                layout: 'anchor',
                items: [{
                    xtype:'textfield',
                    fieldLabel: '姓名(Name)',
                    afterLabelTextTpl: required,
                    allowBlank: false,
                    name: 'student.displayName',
                    anchor:'95%'
                }, {
                    xtype:'textfield',
                    fieldLabel: '英文名(English Name)',
                    name: 'student.englishName',
                    anchor:'95%'
                }, {
                    xtype: 'datefield',
                    name: 'student.birthDate',
                    format: 'Y-m-d',
                    fieldLabel: '出生日期(Date of Birth)',
                    anchor: '95%'
                }, {
                    xtype: 'textfield',
                    name: 'student.school',
                    fieldLabel: '学校',
                    anchor: '95%'
                },multiCombo]
            },{
                xtype: 'container',
                flex: 1,
                layout: 'anchor',
                items: [{
                	xtype: 'radiogroup',
                    fieldLabel: '性别(Gender)',
                    anchor:'40%',
                    items: [
                        {boxLabel: '男', name: 'student.sex', inputValue: 1, checked: true},
                        {boxLabel: '女', name: 'student.sex', inputValue: 0}
                    ]
                },{
                    xtype:'textfield',
                    fieldLabel: '年龄(Age)',
                    name: 'student.age',
                    anchor:'95%'
                },{
                    xtype: 'textfield',
                    name: 'student.grade',
                    fieldLabel: '年级(Grade)',
                    anchor: '95%'
                },{
                    xtype: 'textfield',
                    name: 'student.phone',
                    fieldLabel: '电话(Tel)',
                    anchor: '95%'
                },{
                    xtype: 'textfield',
                    name: 'student.address',
                    fieldLabel: '地址(Address)',
                    anchor: '95%'
                }]
            }]
        },{
            xtype: 'container',
            anchor: '100%',
            layout: 'hbox',
            items: [{
                xtype: 'container',
                flex: 1,
                layout: 'anchor',
                items: [{ 
	                	xtype:'textfield',
	                    fieldLabel: '母亲姓名(Mother)',
	                    afterLabelTextTpl: required,
	                    allowBlank: false,
	                    name: 'student.mother',
	                    anchor:'95%'
                    },{
                    	xtype:'textfield',
                        fieldLabel: '父亲姓名(Father)',
                        afterLabelTextTpl: required,
                        allowBlank: false,
                        name: 'student.father',
                        anchor:'95%'
                    }]
            },{
                xtype: 'container',
                flex: 1,
                layout: 'anchor',
                items: [{ 
	                	xtype:'textfield',
	                    fieldLabel: '手机(Mobile)',
	                    afterLabelTextTpl: required,
	                    allowBlank: false,
	                    name: 'student.MMobile',
	                    anchor:'95%'
                    },{ 
	                	xtype:'textfield',
	                    fieldLabel: '手机(Mobile)',
	                    afterLabelTextTpl: required,
	                    allowBlank: false,
	                    name: 'student.FMobile',
	                    anchor:'95%'
                    }]
            },{
                xtype: 'container',
                flex: 1,
                layout: 'anchor',
                items: [{
                		xtype: 'container',
            			anchor: '100%',
            			layout: 'hbox',	
            			items:[{
            				xtype: 'combo',
            				fieldLabel: '联系方式',
							labelWidth:60,
							displayField: 'name',
                            valueField: 'value',
							width: 60,
							labelSeparator: '',
							value: '3',
							editable: false,
							name: 'student.MContactType',
							store: contact_type_store
            			},{
	            			xtype:'textfield',
		                    fieldLabel: '(Contact):',
		                    afterLabelTextTpl: required,
		                    allowBlank: false,
		                    name: 'student.MContact',
							width: '75%',
							
	                    }]
	                	
                    },{ 
                    	xtype: 'container',
            			anchor: '100%',
            			layout: 'hbox',
            			items:[{
            				xtype: 'combo',
            				fieldLabel: '联系方式',
            				labelWidth:60,
            				displayField: 'name',
                            valueField: 'value',
							width: 60,
							labelSeparator: '',
							value: '3',
							editable: false,
							name: 'student.FContactType',
							store: contact_type_store
            			},{
            				xtype:'textfield',
	                        fieldLabel: '(Contact):',
	                        afterLabelTextTpl: required,
	                        allowBlank: false,
	                        name: 'student.FContact',
							width: '75%'
            			}]
                    	
                    }]
              }]
        },{
        	xtype: 'container',
            anchor: '100%',
            layout: 'hbox',
            items: [{
            	xtype: 'container',
                flex: 1,
                layout: 'anchor',
                items: [{
                	xtype:'textfield',
                    fieldLabel: '母亲工作单位(Working Place)',
                    afterLabelTextTpl: required,
                    allowBlank: false,
                    name: 'student.MWorking',
                    anchor:'95%'
                },{
                	xtype:'textfield',
                    fieldLabel: '父亲工作单位(Working Place)',
                    afterLabelTextTpl: required,
                    allowBlank: false,
                    name: 'student.FWorking',
                    anchor:'95%'
                }]
            },{
            	xtype: 'container',
                flex: 1,
                layout: 'anchor',
                items: [{
                	xtype:'textfield',
                    fieldLabel: '职位(Position)',
                    afterLabelTextTpl: required,
                    allowBlank: false,
                    name: 'student.MPosition',
                    anchor:'95%'
                },{
                	xtype:'textfield',
                    fieldLabel: '职位(Position)',
                    afterLabelTextTpl: required,
                    allowBlank: false,
                    name: 'student.FPosition',
                    anchor:'95%'
                }]
            }]
        },{
            xtype: 'container',
            anchor: '100%',
            layout: 'hbox',
            items: [{
            	xtype: 'container',
                flex: 1,
                layout: 'anchor',
                items: [{
                	xtype:'textfield',
                    fieldLabel: '紧急联系人(Emergency Contact)',
                    afterLabelTextTpl: required,
                    allowBlank: false,
                    name: 'student.emergency',
                    anchor:'95%'
                }]
            },{
            	xtype: 'container',
                flex: 1,
                layout: 'anchor',
					items: [{
					xtype:'textfield',
					fieldLabel: '关系(Relationship)',
					afterLabelTextTpl: required,
					allowBlank: false,
					name: 'student.relationship',
					anchor:'95%'
				}]
            },{
            	xtype: 'container',
                flex: 1,
                layout: 'anchor',
				items: [{
					xtype:'textfield',
					fieldLabel: '电话(Phone Number)',
					afterLabelTextTpl: required,
					allowBlank: false,
					name: 'student.EPhone',
					anchor:'95%'
				}]
            }]
        }],

        buttons: [{
            text: '保存',
            handler: function() {
            	if(this.up('form').getForm().isValid()) {
	                this.up('form').getForm().submit({
	                	url:'../service/student_add',
	                	method: 'POST',
	                	params: {'contracts': contracts},
	        			success:function(form, action) {
	        				Ext.Msg.alert('提示',action.result.msg);
	        			},failure:function(form, action) {
	        				Ext.Msg.alert('提示',action.result.msg);
	        			}
	                });
	            }
            }
        },{
            text: '清空',
            handler: function() {
                this.up('form').getForm().reset();
            }
        }]
    });

    top.render(Ext.getDom("signupform"));

});

</script>
</head>
<body>
<div id="signupform"></div>
</body>
</html>